<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view
		class="pure-month-modal"
		:class="_classes"
		:style="_styles"
	>
		<pure-popup
			class="pure-month-modal__popup"
			v-bind="_props"
			@onClose="$emit('onCancel')"
			@onNot="$emit('onCancel')"
			@onOk="_handleConfirm"
			@onCancel="$emit('onCancel')"
			@onConfirm="_handleConfirm"
		>
			<view class="pure-month-modal__container">
				<view class="pure-month-modal__year">
					<view
						class="pure-month-modal__year__icon pure-month-modal__year__icon--prev"
						:class="{
							'pure-month-modal__year__icon--disabled': _prevYearDisabled
						}"
						:hover-class="hoverClass"
						@tap="_handlePrevYearClick"
					>
						<pure-icon :name="prevIconName"></pure-icon>
					</view>
					<text class="pure-month-modal__year__text">{{ _yearText }}</text>
					<view
						class="pure-month-modal__year__icon pure-month-modal__year__icon--next"
						:class="{
							'pure-month-modal__year__icon--disabled': _nextYearDisabled
						}"
						:hover-class="hoverClass"
						@tap="_handleNextYearClick"
					>
						<pure-icon :name="nextIconName"></pure-icon>
					</view>
				</view>
				<view class="pure-month-modal__body">
					<view class="pure-month-modal__months">
						<view
							class="pure-month-modal__month"
							v-for="month in 12"
							:key="month"
							:class="_getMonthClass(month)"
							@tap="_handleMonthClick(month)"
						>
							<view class="pure-month-modal__month__text">{{ _formatMonthText(month) }}</view>
						</view>
					</view>
				</view>
			</view>
		</pure-popup>
	</view>
</template>

<script>
	import commonComponentOptions from "../../config/options";
	export default {
		options: commonComponentOptions
	};
</script>

<script setup>
	import { ref, computed, watch } from "vue";
	import props from "./props";
	import { isString, isNumber } from "@/uni_modules/pure-utils";

	// 当前展示的年份
	const _currentYear = ref("");

	// 当前选中的年/月
	const _selectYear = ref("");
	const _selectMonth = ref("");

	// -------------------------------------------------------------------------------- Props
	const _props = defineProps(props);

	// -------------------------------------------------------------------------------- Emits
	const _emits = defineEmits(["onCancel", "onConfirm", "onChange"]);

	// -------------------------------------------------------------------------------- Classes
	const _classes = computed(() => {
		const array = [];

		// 安全底部
		if (_props?.safeAreaBottom) array.push(`pure-month-modal--safe-area-bottom`);

		return array;
	});

	// -------------------------------------------------------------------------------- Styles
	const _styles = computed(() => {
		const array = [];
		return array;
	});

	// 每次打开弹窗时，设置默认值
	watch(
		() => _props.show,
		(newVal) => {
			if (newVal) {
				_setDefaultValue();
			}
		},
		{ immediate: true }
	);

	// 开始日期
	const _startDate = computed(() => {
		const date = _formatDate(_props.startDate);
		const year = date.getFullYear();
		const month = date.getMonth() + 1;
		return {
			date: new Date(year, month - 1),
			year,
			month
		};
	});

	// 结束日期
	const _endDate = computed(() => {
		const date = _formatDate(_props.endDate);
		const year = date.getFullYear();
		const month = date.getMonth() + 1;
		return {
			date: new Date(year, month - 1),
			year,
			month
		};
	});

	// 展示的年份字符串
	const _yearText = computed(() => {
		return `${_currentYear.value}年`;
	});

	// 禁用上一年切换按钮
	const _prevYearDisabled = computed(() => {
		return _currentYear.value <= _startDate.value.year;
	});

	// 禁用下一年切换按钮
	const _nextYearDisabled = computed(() => {
		return _currentYear.value >= _endDate.value.year;
	});

	// 格式化为标准日期 Date 格式
	function _formatDate(date) {
		if (!date) return new Date();
		// 日期字符串或时间戳
		if (isString(date)) {
			date = new Date(date.replace(/-/g, "/"));
		}
		return new Date(date);
	}

	// 格式化月份字符串
	function _formatMonthText(month) {
		if (month < 10) month = `0${month}`;
		return `${month}月`;
	}

	// 获取月份的类名
	function _getMonthClass(month) {
		const array = [];

		// 转换成 Date 格式
		const date = new Date(_currentYear.value, month - 1);
		const startDate = _startDate.value.date;

		// 是否禁用
		if (date < startDate) {
			array.push("pure-month-modal__month--disabled");
		}

		// 是否选中
		if (_currentYear.value === _selectYear.value && month === _selectMonth.value) {
			array.push("pure-month-modal__month--selected");
		}

		return array;
	}

	// 月份点击事件
	function _handleMonthClick(month) {
		_selectYear.value = _currentYear.value;
		_selectMonth.value = month;
		_emits("onChange", {
			year: _selectYear.value,
			month
		});
	}

	// 上一年点击事件
	function _handlePrevYearClick() {
		if (!_prevYearDisabled.value) {
			_currentYear.value--;
		}
	}

	// 下一年点击事件
	function _handleNextYearClick() {
		if (!_nextYearDisabled.value) {
			_currentYear.value++;
		}
	}

	// 确认选择
	function _handleConfirm() {
		_emits("onConfirm", {
			year: _selectYear.value,
			month: _selectMonth.value
		});
	}

	// 设置默认值
	function _setDefaultValue() {
		let modelValue = _props.modelValue;
		modelValue = modelValue.replace(/年|月/g, "-");
		const defaultDate = _formatDate(modelValue);
		const defaultYear = defaultDate.getFullYear();
		const defaultMonth = defaultDate.getMonth() + 1;
		_currentYear.value = defaultYear;
		_selectYear.value = defaultYear;
		_selectMonth.value = defaultMonth;
	}
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>
